<template>
  <div class="box">
    <!-- 学科 -->
    <div style="margin-bottom: 10px">
      <span>学科名称:</span>
      <el-input v-model="name" class="inp" placeholder="请输入内容" clearable />
      <el-button @click="qingchu">清除</el-button><el-button type="primary" @click="sousuo">搜索</el-button>
      <el-button
        type="success"
        icon="el-icon-edit"
        class="adds"
        @click="xinzheng"
      >
        新增学科
      </el-button>
    </div>
    <!-- 提示 -->
    <el-alert type="info" show-icon>
      <template #title> 数据一共 {{ numberOfArticles }} </template>
    </el-alert>
    <!-- 表格 -->
    <el-table
      ref="singleTable"
      :data="tableData"
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column type="index" width="50" label="序号" />
      <el-table-column property="subjectName" label="学科名称" width="120" />
      <el-table-column property="creator" label="创建者" width="120" />
      <el-table-column property="addDate" label="创建日期" width="120">
        <template v-slot="{ row }">
          {{ row.addDate | times }}
        </template>
      </el-table-column>
      <el-table-column
        property="isFrontDisplay"
        label="前台是否显示"
        width="120"
      >
        <template v-slot="{ row }">
          {{ row.isFrontDisplay == 1 ? '是' : '否' }}
        </template>
      </el-table-column>
      <el-table-column
        property="twoLevelDirectory"
        label="二级目录"
        width="120"
      />
      <el-table-column property="tags" label="标签" width="120" />
      <el-table-column property="totals" label="题目数量" width="120" />
      <el-table-column property="address" label="操作">
        <template v-slot="{ row }">
          <el-button type="text" @click="fenlei(row)">学科分类</el-button>
          <el-button type="text" @click="biaoqian(row)">学科标签</el-button>
          <el-button type="text" @click="revise(row)">修改</el-button>
          <el-button type="text" @click="dell(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      style="float: right"
      background
      :current-page="page"
      :page-sizes="[5, 10, 20, 50, 100]"
      :page-size="pagesize"
      layout="  prev, pager, next,sizes, jumper"
      :total="numberOfArticles"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- 弹窗 -->
    <el-dialog :visible.sync="dialogVisible" width="30%">
      <template #title>
        <span v-if="show">新增学科</span>
        <span v-else>修改学科</span>
      </template>
      <span><i style="color: red; margin: 8px">*</i>学科名称</span>
      <el-input
        v-model="addxueke"
        style="width: 70%; margin-left: 10px"
        placeholder="请输入学科名称"
      />
      <div style="margin-top: 30px">
        <span style="margin-left: 20px">是否显示</span>
        <el-switch
          v-model="value"
          active-color="#13ce66"
          inactive-color="#ff4949"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="quxiao">取 消</el-button>
        <el-button type="primary" @click="tijiao"> 确 定 </el-button>
      </span>
    </el-dialog>
    <!-- 删除弹框 -->
    <el-dialog title="提示" :visible.sync="delenr" width="30%">
      <span><i
        class="el-icon-info"
        style="color: #e6a23c; font-size: 20px"
      />此操作将永久删除该文件，是否继续</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delenr = false">取 消</el-button>
        <el-button type="primary" @click="dels"> 确 定 </el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { xuekelist, xuekeadd, xuekexiugai, xuekedel } from '@/api/subject'

export default {
  data() {
    return {
      name: '', // 搜索框
      delId: '', // 删除修改携带的id
      delenr: false, // 删除弹框
      addxueke: '', // 弹窗新增学科
      value: true, // 是否显示弹框里的
      show: true, // 判断是否是新增
      dialogVisible: false, // 弹框显示或隐藏
      pagesize: 10, // 每页几条
      page: 1, // 当前页
      input: '', // 输入框
      numberOfArticles: 100, // 数据总条数
      // 渲染的数据
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ]
    }
  },
  created() {
    this.renderThePage()
  },
  mounted() {},
  methods: {
    // 点击取消
    quxiao() {
      this.dialogVisible = false
      this.addxueke = ''
      this.value = true
    },
    // 新增科目
    xinzheng() {
      this.show = true
      this.dialogVisible = true
    },
    // 提交学科
    async tijiao() {
      if (this.show) {
        await xuekeadd({
          isFrontDisplay: this.value ? 1 : 0,
          subjectName: this.addxueke
        })
      } else {
        await xuekexiugai({
          id: this.delId,
          subjectName: this.addxueke,
          isFrontDisplay: this.value ? 1 : 0
        })
      }
      this.value = false
      this.addxueke = ''
      this.dialogVisible = false
      this.renderThePage()
    },
    // 渲染页面
    async renderThePage() {
      const { data } = await xuekelist({
        page: this.page,
        pagesize: this.pagesize
      })
      this.numberOfArticles = data.counts
      this.tableData = data.items
      console.log(data)
    },
    // 清除
    qingchu() {
      this.name = ''
      this.renderThePage()
    },
    // 搜索
    async sousuo() {
      if (this.name !== '') {
        const { data } = await xuekelist({
          page: this.page,
          pagesize: this.pagesize,
          subjectName: this.name
        })
        this.numberOfArticles = data.counts
        this.tableData = data.items
      }
    },
    // 点击修改
    async revise(row) {
      this.delId = row.id
      if (row.isFrontDisplay === 1) {
        this.value = true
      } else {
        this.value = false
      }
      this.addxueke = row.subjectName

      this.show = false
      this.dialogVisible = true
    },
    // 点击删除
    dell(row) {
      this.delenr = true
      this.delId = row.id
    },
    // 确认删除
    async dels() {
      await xuekedel(this.delId)
      this.delenr = false
      this.renderThePage()
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.page = val
      this.renderThePage()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.page = val
      this.renderThePage()
    },
    // 跳转
    fenlei(row) {
      this.$router.push({
        path: '/subject/mulu',
        query: { id: row.id }
      })
    },
    biaoqian(row) {
      this.$router.push({
        path: '/subject/biaoqian',
        query: { id: row.id }
      })
    }
  }
}
</script>
<style scoped lang="scss">
.adds {
  float: right;
}
.box {
  padding: 20px;
  /* background-color: #f4f4f5; */
}
.inp {
  width: 200px;
  margin: 0 10px;
}
</style>
